<template>
	<van-tabbar v-model="tabsCurrent" @change='getCurrentCompName' :border='false'>
		<van-tabbar-item icon="search">
			<template #icon="props">
				<img :src="props.active ? icon[0].active : icon[0].inactive" />
			</template>
			<span>首页</span>
		</van-tabbar-item>
		<van-tabbar-item icon="search">
			<template #icon="props">
				<img :src="props.active ? icon[1].active : icon[1].inactive" />
			</template>
			<span>挂单</span>
		</van-tabbar-item>
		<van-tabbar-item icon="setting-o">
			<template #icon="props">
				<img :src="props.active ? icon[2].active : icon[2].inactive" />
			</template>
			<span>店铺</span>
		</van-tabbar-item>
	</van-tabbar>
	<!-- 组件切换 -->
	<component :is="currentCompName"></component>
</template>

<script setup>
	import {
		ref,
		reactive,
		markRaw,
		onMounted
	} from 'vue';
	import Home from '../Home/index.vue';
	import Pending from '../Pending/index.vue';
	import Shop from '../Shop/index.vue';

	const tabsCurrent = ref(0);
	let currentCompName = Home;

	const getCurrentCompName = () => {
		switch (tabsCurrent.value) {
			case 1:
				currentCompName = Pending;
				break;
			case 2:
				currentCompName = Shop;
				break;
			default:
				currentCompName = Home;
		}
	};
	// onMounted(() => {})
	const icon = [
		{
			active: '../../static/images/service/home/icon-home-yes.png',
			inactive: '../../static/images/Home/tabbar_home.png'
		},
		{
			active: '../../static/images/service/home/icon-item-yes.png',
			inactive: '../../static/images/service/home/icon-hang-nor.png'
		},
		{
			active: '../../static/images/service/home/icon-store-yes.png',
			inactive: '../../static/images/service/home/icon-store-nor.png'
		}
	]
</script>

<style lang="scss" scoped>
	::v-deep.van-tabbar{
		height: 112px;
		background: #121316;
		.van-tabbar-item__icon img{
			height: 44.23px;
			width: 44.23px;
		}
		.van-tabbar-item__text{
			font-size: 20px;
			color: white;
		}
		.van-tabbar-item{
			padding: 20px 0;
			box-sizing: border-box;
			justify-content: space-between;
			// border-top: none;
		}
	}
	::v-deep.van-tabbar-item--active{
		background: #121316;
	}
</style>